<script lang='ts'>
export default {
 name: 'Study6StuDemo1',
}
</script>

<template>
<h2>组件注册</h2>
<div class="note">
  <h3>全局注册</h3>
  <p>方法一：</p>
  <p>1. 在main.ts文件中app.component注册全局组件 MyComponent</p>
  <p>2. 在其它组件中直接调用</p>
  <p>3. 如果在其它组件中使用要往里插入代码，需在注册时定义插槽slot</p>
  <hr />
  <p>方法二：</p>
  <p>1. 在main.ts文件中import导入组件, app.component注册全局组件</p>
  <p>2. 在其它组件中直接调用</p>
</div>
<div class="note">
  <h3>局部注册</h3>
  <p>1. 想用哪个组件，直接在script中import导入</p>
</div>
<div class="note">
  <h3>局部注册注意事项</h3>
  <p>1. 在`选项式API`中调用，除了在script中import导入，还需要export default中components导入（eg.在study1的StuDemo1中可查看）</p>
  <p>2. 在`组合式API（非setup语法糖）`中调用，除了在script中import导入，还需要export default中components导入（eg.在study1的StuDemo2中可查看）</p>
  <p>3. 在`组合式API-自定义渲染-返回函数(h)`中调用，script中import导入即可（eg.在study1的StuDemo3中可查看）</p>
  <p>4. 在`组合式API-自定义渲染-JSX`中调用，script中import导入即可（eg.在study1的StuDemo4中可查看）</p>
  <p>5. 在`组合式API（setup语法糖）`中调用，script中import导入即可（eg.在study1的StuDemo5中可查看）</p>
</div>



<hr class="hr-style" />
<div class="test">
  <MyComponent1>
    <p style="color:skyblue">我是全局定义的组件1</p>
  </MyComponent1>
  <hr class="hr-style" />
  <MyComponent>
    <p style="color:skyblue">我是全局定义的组件2</p>
  </MyComponent>
</div>
<div class="test">
  <hr class="hr-style" />
  <p style="color:skyblue">我是局部注册的组件</p>
  <StuDemo5></StuDemo5>
</div>
</template>

<script setup lang='ts'>
// import StuDemo5 from '../study3/StuDemo5.vue';  
import StuDemo5 from '@/views/study3/StuDemo5.vue';
</script>

<style scoped>
body {
padding: 20px;
}
h2 {
color: red;
}
h3 {
color: rgb(220, 85, 85);
}
h4 {
color:skyblue;
}
.hr-style {
border: 3px solid gold;
margin: 20px 0;
}
.note {
margin: 10px;
padding: 10px;
border: 3px solid rgb(221, 121, 202);
}
.note p {
color: rgb(226, 106, 204);
font-weight: bold;
}
</style>